<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="../template/index.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core">
	<ui:define name="title">
		<script>
        	$('document').ready(function(){
        		$('.result-paging').change(function(){
        			$("#resultForm\\:paging-click").click();
        		});
        	});
        </script>
	</ui:define>
	<ui:define name="lcontent">
		<ui:include src="/template/menu-left/human-resources.xhtml"></ui:include>
	</ui:define>
	<ui:define name="rcontent">
		<h:form id="form">
			<f:event listener="#{employee.onloadManage}" type="preRenderView"></f:event>
			<span class="rtitle">Danh sách nhân viên</span>
			<hr />
			<a class="button-link green-bt open-newDepartmentDialog" 
				href="#{facesContext.externalContext.requestContextPath}/human-resources/new-employee.html"> + Thêm nhân viên mới
			</a>
			<a class="button-link white-bt load reload-btn">
				<img src="#{facesContext.externalContext.requestContextPath}/resources/images/icons/refresh.png" alt="" />
			</a>
			<span class="clear"></span>
			<div class="list">
				<div class="nav-page-tp result-paging">
					Trang
					<h:selectOneMenu value="#{employee.currentPage}">
						<f:selectItems value="#{employee.pages}" ></f:selectItems>
					</h:selectOneMenu>
					<h:commandLink id="paging-click" styleClass="hide" action="#{employee.paging}"></h:commandLink>
				</div>
				<span class="result-detail">Total 106 records. Showing 1 to 20</span>
				<ui:repeat var="var" value="#{employee.listEmployee}">
					<div class="list-item">
						<table>
							<tr>
								<td class="list-item-checked">
									<h:selectBooleanCheckbox styleClass="cbx"></h:selectBooleanCheckbox>
								</td>
								<td>
									<h:commandLink styleClass="list-item-click" actionListener="#{employee.clickToEdit}">
										<h:outputText value="#{var.lastname} #{var.firstname}"/>
										<f:attribute name="object" value="#{var}"></f:attribute>
									</h:commandLink>
									<span class="list-item-title">| Phòng ban: #{var.department.name} | Chức vụ: #{var.designation.name}</span><br />
									<h:commandLink styleClass="status green-bg" rendered="#{var.status == 1}">
										<h:outputText value="Đang làm việc"/>
									</h:commandLink>
									<h:commandLink styleClass="status red-bg" rendered="#{var.status == 2}">
										<h:outputText value="Đã nghỉ" />
									</h:commandLink>
									<span class="clear"/> 
									<span class="list-item-created">
										Được tạo bởi <h:outputText value="#{var.created_by}"/> vào 
										<h:outputText value="#{var.created_by}">
											<f:convertDateTime pattern="dd/MM/yyyy hh:mm:ss"></f:convertDateTime>
										</h:outputText>
										| Thay đổi bởi 
										<h:outputText value="#{var.modified_by}"/> vào
										<h:outputText value="#{var.modified_date}">
											<f:convertDateTime pattern="dd/MM/yyyy hh:mm:ss"></f:convertDateTime>
										</h:outputText>
									</span>
								</td>
							</tr>
						</table>
					</div>
				</ui:repeat>
			</div>
		</h:form>
	</ui:define>
</ui:composition>